<template>
  <div class="paper">
    <!-- 答题卡 -->
    <div class="paper-left">
      <el-card shadow="never" class="paper-left-top">
        <!-- <el-avatar size="large"/> -->
        <!-- <div class="userContent">
          <img
            :src="userStore.avaterUrl"
            class="avatar"
            v-if="userStore.avaterUrl"
          />
          <UserOutlined v-else class="avatar-uploader-icon" />
          <span class="paper-left-top-username">
            <span> {{ user.name }}</span> <span> {{ user.orgName }}</span>
          </span>
        </div>
        <div class="paper-left-top-statis">
          <div>
            <Iconfont
              icon="icon-jiangbei"
              :size="20"
              color="#F6961E;"
              :width="30"
              :height="30"
              :radius="5"
              background-color="#FDF3E7"
            />
            <span class="paper-left-top-statis-value">1道</span>

            <span class="paper-left-top-statis-txt">试题数量</span>
          </div>
        </div> -->
        <el-button type="primary" plain @click="$router.go(-1)">返回</el-button>
      </el-card>
      <el-card shadow="never" class="paper-left-bottom" style="background-color: #fafafa;">
        <el-divider> 答题卡 </el-divider>
        <el-scrollbar height="calc(100vh - 200px)">
          <el-button type="" plain>1</el-button>
        </el-scrollbar>
      </el-card>
    </div>
    <!-- 试卷 -->
    <el-card shadow="never" style="background-color: #fafafa;" class="paper-right">
      <!-- 选项 -->
      <el-divider />
      <QuestionVue
        no="1"
        :type="myquestion.type"
        :markType="myquestion.markType"
        :title="myquestion.title"
        :score="myquestion.score"
        :answers="myquestion.answers"
        :userScore="myquestion.userScore"
        :userAnswers="myquestion.userAnswers"
        :options="myquestion.options"
        :editable="false"
        :errShow="true"
        :user-answer-show="false"
      >
      </QuestionVue>
      <!-- 评论 -->
    </el-card>
  </div>
</template>
  <script lang="ts" setup>
import http from "@/request";
import {
  computed,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  watchEffect,
} from "vue";
import QuestionVue from "@/components/question/Question.vue";
import _ from "lodash";
import FeedbackComponent from "@/components/feedback.vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox, type Action } from "element-plus";
import { Download, Star } from "@element-plus/icons-vue";
import { HeartFilled, HeartOutlined,UserOutlined } from "@ant-design/icons-vue";
import type { Question } from "@/stores/exam";
import dayjs from "dayjs";
import CountDown from "@/components/CountDown.vue";
import { useUserStore } from "@/stores/user";

// 定义变量
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const exer = reactive({
  // 练习信息
  id: null, // 练习ID
  startTime: null as unknown, // 开始时间
  endTime: null as unknown, // 结束时间
  rmkState: 2, // 评论状态（1：是；2：否）
  questionIds: [] as number[], // 试题列表
  answerShow: false, // 标准答案显示
  randShow: false, // 乱序显示
  rmkShow: false, // 评论显示
  firstTime: new Date(), // 第一次进入时间
  lastTime: new Date(), // 最后一次答题时间
  color: "", // 倒计时颜色
});
const myquestion = ref({
  
})
const curQuestion = reactive({
  // 当前试题
  index: -1, // 索引
  question: {} as Question, // 内容
  cache: {} as { [questionId: number]: Question }, // 缓存
});
const user = reactive({
  // 用户信息
  name: "", // 姓名
  orgName: "", // 机构名称
});

// 组件挂载完成后，执行如下方法
onMounted(async () => {
  // 隐藏页头信息（模拟全屏）

  // 获取机构信息
  let {
    data: { data: data2 },
  } = await http.post("user/get", {});
  user.name = data2.name;
  user.orgName = data2.orgName;
  let questionID = 0;
  // 获取我的练习
  questionID = parseInt(route.params.index as string);
  exer.id = route.params.name;

  if (questionID) {
    let {
      data: { data: data },
    } = await http.post("search/getQuestion", { questionId: questionID });
    console.log(data, "+++++");
    myquestion.value = data;
  }
});


</script>
  
  <style lang="scss" scoped>
.paper {
  flex: 1;
  display: flex;
  margin-bottom: 10px;
  .paper-left {
    width: 324px;
    display: flex;
    flex-direction: column;
    .paper-left-top {
      margin-bottom: 10px;
      background-color: #fafafa;
      :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 10px;
        .el-avatar {
          border: 2px solid var(--el-color-primary);
          margin-bottom: 10px;
        }
        .paper-left-top-username {
          font-size: 13px;
          font-weight: bold;
          color: #333;
        }
        .paper-left-top-statis {
          display: flex;
          width: 100%;
          margin-bottom: 18px;
          div {
            flex: 1;
            margin: auto;
            .paper-left-top-statis-value {
              font-size: 12px;
              font-weight: bold;
              color: var(--el-text-color-regular);
              padding-top: 5px;
              display: block;
              text-align: center;
            }
            .paper-left-top-statis-txt {
              font-size: 14px;
              font-weight: bold;
              color: #333;
              display: block;
              text-align: center;
            }
          }
        }
        .paper-left-top-time {
          border: 1px dashed var(--el-color-primary);
          padding: 5px;
          margin-top: 20px;
          width: 100%;
          span {
            font-weight: bold;
            font-size: 14px;
            color: var(--el-color-primary);
            margin: auto;
            display: block;
            text-align: center;
          }
        }
        .el-button {
          width: 100%;
          margin-top: 10px;
          margin-left: 0px;
        }
      }
    }

    .paper-left-bottom {
      .el-divider--horizontal {
        margin: 15px 0px 20px 0px;
      }
      .el-button {
        height: 50px;
        width: 50px;
        padding: 0;
        margin: 2px;
        font-size: 18px;
      }
      .paper-left-bottom-chapter {
        font-size: 13px;
        font-weight: bold;
        margin: 5px 0px;
        cursor: pointer;
      }
    }
  }

  :deep(.paper-right) {
    flex: 1;
    width: 800px;
    min-height: calc(100vh - 50px);
    margin-left: 10px;
    .question-paper {
      min-height: 200px;
    }
    .paper-right-opt {
      display: flex;
      align-items: center;
      margin: 15px 15px 0px 15px;
      padding-left: 15px;
      .el-checkbox {
        margin-left: 30px;
        margin-right: 0px;
      }
    }
    .el-divider--horizontal {
      width: initial;
      margin: 5px 20px 10px 20px;
    }
    .paper-right-my-rmk {
      display: flex;
      margin: 10px 20px;
      align-items: flex-end;
      .el-textarea__inner {
        box-shadow: initial;
      }
      .el-checkbox {
        margin: 0px 10px;
      }
    }
    .paper-right-rmk-list {
      padding: 0;
      margin: 0;
      list-style: none;
      overflow: auto;
      li {
        display: flex;
        flex-direction: column;
        min-height: 50px;
        background: var(--el-color-primary-light-9);
        margin: 10px 20px;
        padding: 10px;
        color: var(--el-text-color-regular);
        .el-text {
          margin: 0px 0px 5px 0px;
          align-self: initial;
        }
        div {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          font-size: 12px;
          .el-text {
            margin: 0px;
          }
          .iconfont {
            cursor: pointer;
            font-size: 14px;
            &:hover {
              color: var(--el-color-primary);
            }
          }
        }
      }
    }
  }
}
</style>
  <style lang="scss" scoped>
.paper-right {
  :deep .myButton {
    font-size: 16px;
    color: #108ee9;
  }
  :deep .el-checkbox__label {
    font-size: 16px;
    color: #333;
  }
  :deep .el-radio__label {
    font-size: 16px;
  }
}

.popper-class {
  max-width: 800px;
}
.heartContent {
  margin-left: 26px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  .heart {
    margin-right: 4px;
    font-size: 18px;
    color: #f50;
  }
}
.userContent {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.paper-left-top-username {
  display: flex;
  flex-direction: column;
}
.avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%; /* 设置圆形头像框 */
  object-fit: cover; /* 图片填充头像框 */
  margin-right: 6px;
}
.avatar-uploader-icon {
  font-size: 28px;
  margin-right: 6px;
}
</style>